<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件认知</title>
    <style>
        .counter-box {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            margin-top: 20px;
            background-color: #67c23a;
        }
    </style>

</head>
<body>
<div id="app">
<!--    <div class="counter-box" @click="counterClick">-->
<!--        {{num}}-->
<!--    </div>-->

<!--    <div class="counter-box" @click="counterClick">-->
<!--        {{num}}-->
<!--    </div>-->

    <counter></counter>
    <counter></counter>

    <message-box></message-box>
    <counter2></counter2>

</div>
</body>
<script src="../../lib/vue.global.js"></script>
<script>

     /**
      *  组件
      *    注册
      *      全局注册
      *      局部注册 （*）
      *
      * */

     var counter2={
         template:'<div>lol</div>'
     }

     var app= Vue.createApp({

         data:function (){

         },
         components:{
             counter2
         }
      });

     app.component('counter',{
         data:function (){
           return {
               num:0
           }
         },
         template:'  <div class="counter-box" @click="counterClick">\n' +
             '        {{num}}\n' +
             '    </div>',
         methods:{
             counterClick:function (){
                 this.num++;
             }
         }
     })




     app.component('messageBox',{
         data:function (){
             return {
                  message:'hello'
             }
         },
         template:'<div>{{message}}</div>',
     })

     app.mount('#app')



</script>
</html>